<template>
  <div class="content">
    <img src="img/yp.png" class="topimg" />
    <div class="sug">
      <p class="top">为你推荐</p>
      <div class="bottom">
        <div class="item">
            <img src="img/sug1.png">
            <p>智能手环</p>
        </div>
        <div class="item">
            <img src="img/sug2.png">
            <p>真无线</p>
        </div>
        <div class="item">
            <img src="img/sug3.png">
            <p>轻薄本</p>
        </div>
        <div class="item">
            <img src="img/sug4.png">
            <p>经典酒饮</p>
        </div>
        <div class="item">
            <img src="img/sug5.png">
            <p>小米系列</p>
        </div>
        <div class="item">
            <img src="img/sug6.png">
            <p>吸顶灯</p>
        </div>
      </div>
    </div>
    <!-- ----- -->
    <div class="sug">
      <p class="top">精选专区</p>
      <div class="bottom">
        <div class="item">
            <img src="img/sug1.png">
            <p>智能手环</p>
        </div>
        <div class="item">
            <img src="img/sug2.png">
            <p>真无线</p>
        </div>
        <div class="item">
            <img src="img/sug3.png">
            <p>轻薄本</p>
        </div>
        <div class="item">
            <img src="img/sug4.png">
            <p>经典酒饮</p>
        </div>
        <div class="item">
            <img src="img/sug5.png">
            <p>小米系列</p>
        </div>
        <div class="item">
            <img src="img/sug6.png">
            <p>吸顶灯</p>
        </div>
      </div>
    </div>
    <!-- ------------ -->
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.content{
    display: flex;
    flex-wrap: wrap;
}
.topimg {
  width: 97%;
  border-radius: 0.1rem;
  margin-bottom: 0.1rem;
}
.sug {
  width: 97%;
  border-radius: 0.1rem;
  height: 2.5rem;
  margin-bottom: 0.1rem;
}
.sug .top{
    font-size: 0.14rem;
    font-weight: bold;
    line-height: 0.23rem;
    margin: 0.1rem 0.1rem;
}
.bottom{
    display: flex;  
    flex-wrap: wrap;
}
.bottom .item{
    width: 0.66rem;
    height: 0.89rem;
    margin: -0.09rem 0.1rem 0.29rem 0.1rem;

}
.item img{
    width: 0.66rem;
    height: 0.66rem;
    padding-bottom: 0.23rem;
}
.item p{
    color: rgb(119, 119, 119);
    font-size: 0.12rem;
    text-align: center;
    vertical-align: middle;
    width: 0.76rem;
    top: -0.44rem;
    left: -0.05rem;
    position: relative;
}
</style>